<template>
  <a-modal
    :visible="visible"
    :title="title"
    :width="1200"
    :destroyOnClose="true"
    @ok="() => (this.visible = false)"
    @cancel="() => (this.visible = false)"
  >
    <a-form-model
      class="form-adjust"
      ref="form"
      :model="forms"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-form-model-item
        label="目录分类"
        prop="classifyId"
        :rules="[{ required: true, message: '请选择分类名称!' }]"
      >
        <a-select
          allowClear
          @change="changeClassify"
          v-model="forms.classifyId"
          placeholder="请选择目录分类">
          <a-select-option v-for="brand in catalogList" :title="brand.name" :key="brand.id">
            {{ brand.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="商品名称"
        prop="originGoodsId"
        :rules="[{ required: true, message: '请选择商品!' }]"
      >
        <a-select
          allowClear
          v-model="forms.originGoodsId"
          placeholder="请选择商品">
          <a-select-option v-for="brand in goodsList" :title="brand.name" :key="brand.id">
            {{ brand.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="商品配置"
        prop="configuration"
        :rules="[{ required: true, message: '请输入商品配置!' }]"
      >
        <a-input
          class="search-input"
          placeholder="请输入商品配置"
          v-model="forms.configuration"
        />
      </a-form-model-item>
      <a-form-model-item
        label="商品明细"
      >
        <a-row>
          <a-button type="link" @click="addGoods">添加商品行</a-button>
        </a-row>
<!--        :scroll="{ x: 1200 }"-->
        <a-table :pagination="false" :columns="columns" :dataSource="forms.itemsList"
                 :row-key="record=>record.id">
          <template slot="colorStatus" slot-scope="text,record,index">
            <a-input
              class="search-input"
              placeholder="请输入商品颜色"
              @blur="changColor(arguments,index)"
              v-model="record.color"
            />
          </template>
          <template slot="priceStatus" slot-scope="text,record">
            <a-input
              class="search-input"
              placeholder="请输入商品价格"
              v-model="record.price"
            />
          </template>
          <template slot="upDownPriceStatus" slot-scope="text,record">
            <a-input
              class="search-input"
              placeholder="请输入涨跌价格"
              v-model="record.upDownPrice"
            />
          </template>
          <template slot="supplyDemandStatus" slot-scope="text,record">
            <a-select
              class="search-input"
              placeholder="请选择供求关系"
              style="width: 120px;"
              v-model="record.supplyDemand"
            >
              <a-select-option :value="1">大量要</a-select-option>
              <a-select-option :value="2">需求少</a-select-option>
            </a-select>
          </template>
          <template slot="Status" slot-scope="text,record">
            <a-select
              class="search-input"
              placeholder="请选择供求关系"
              style="width: 100px;"
              v-model="record.status"
            >
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="0">禁用</a-select-option>
            </a-select>
          </template>
          <template slot="operate" slot-scope="text,record,index">
            <a-button type="link" @click="removeGoods(index)">删除</a-button>
          </template>
        </a-table>
      </a-form-model-item>

<!--      <a-form-model-item
        label="商品价格"
        prop="url"
        :rules="[{ required: true, message: '请输入商品价格!' }]">
        <a-input
          class="search-input"
          placeholder="请输入商品价格"
          v-model="forms.url"
        />
      </a-form-model-item>
      <a-form-model-item
        label="商品规格"
        prop="pUrl"
        :rules="[{ required: true, message: '请输入商品规格!' }]">
        <a-input
          class="search-input"
          placeholder="请输入商品规格"
          v-model="forms.pUrl"
        />
      </a-form-model-item>
      <a-form-model-item
        label="商品颜色"
        prop="routeName"
        :rules="[{ required: true, message: '请输入商品颜色!' }]">
        <a-input
          class="search-input"
          placeholder="请输入商品颜色"
          v-model="forms.routeName"
        />
      </a-form-model-item>
      <a-form-model-item
        label="商品状态"
        prop="state"
        :rules="{ required: true, message: '请选择商品状态!' }"
      >
        <a-radio-group v-model="forms.state">
          <a-radio value="1">
            启用
          </a-radio>
          <a-radio value="0">
            禁用
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item
        label="当日涨跌价格"
        prop="permCode"
        :rules="{ required: true, message: '请输入当日涨跌价格!' }">
        <a-input
          class="search-input"
          placeholder="请输入当日涨跌价格"
          v-model="forms.permCode"
        />
      </a-form-model-item>
      <a-form-model-item
        label="供需标识"
        prop="permType"
        :rules="{ required: true, message: '请选择供需标识!' }"
      >
        <a-select v-model="forms.permType" placeholder="请选择供需标识!" :disabled="disabled">
          <a-select-option
            v-for="(item, index) in permTypes"
            :key="index"
            :value="item.code">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>-->
<!--      <a-form-model-item
        label="排序"
        prop="orderNum"
        :rules="{ required: true, message: '请输入排序!' }"
      >
        <a-input-number
          placeholder="排序"
          :min="1"
          v-model="forms.orderNum"
        />
      </a-form-model-item>
      <a-form-model-item
        label="状态"
        prop="state"
        :rules="{ required: true, message: '请选择状态!' }"
      >
        <a-radio-group v-model="forms.state">
          <a-radio value="1">
            启用
          </a-radio>
          <a-radio value="0">
            禁用
          </a-radio>
        </a-radio-group>
      </a-form-model-item>-->
    </a-form-model>
    <template slot="footer">
      <a-button type="primary" @click="save()" :disabled="btndisabled" :loading="loading('save')" v-preventReClick:save>
        保存
      </a-button>
      <a-button @click="() => (this.visible = false)" :disabled="btndisabled" :loading="loading('cancel')"
                v-preventReClick:cancel>
        取消
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import {formMixin} from '@/mixins/'
import {add, update} from '@/api/system/permission'
import {getPageList,saveProtocolGoodsPageList,getClassifyPageList2,findByClassifyId,updaterotocolGoodsPageList} from "@/api/goodsSort/goodsSort";

export default {
  mixins: [formMixin],
  data() {
    return {
      disabled: false,
      forms: {
        itemsList: []
      },
      title: '',
      visible: false,
      labelCol: {
        xs: {span: 24},
        sm: {span: 3}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 20}
      },
      type: 'add',
      permTypes: [
        {code: '1', name: '商品价格'},
        {code: '2', name: '商品价格'},
        // {code: '3', name: '数据权限'}
      ],
      catalogList: [],
      goodsList: [],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 80,
          customRender: (value, row, index) => `${index + 1}`
        },
        {
          title: '颜色',
          dataIndex: 'color',
          align: 'center',
          width: "150px",
          scopedSlots: { customRender: 'colorStatus' }
        },
        {
          title: '价格',
          dataIndex: 'price',
          align: 'center',
          width: "150px",
          scopedSlots: { customRender: 'priceStatus' }
        },
        {
          title: '涨跌',
          dataIndex: 'upDownPrice',
          align: 'center',
          width: "100px",
          scopedSlots: { customRender: 'upDownPriceStatus' }
        },
        {
          title: '供求关系',
          dataIndex: 'supplyDemand',
          align: 'center',
          width: "120px",
          scopedSlots: { customRender: 'supplyDemandStatus' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          width: "120px",
          scopedSlots: { customRender: 'Status' }
        },
        {
          title: '操作',
          dataIndex: '',
          scopedSlots: { customRender: 'operate' },
          align: 'center',
          width: "100px",
        },
      ],
      itemList: [],
    }
  },
  created() {

  },
  mounted() {
    this.loadCatalog()
    this.loadGoods()
  },
  methods: {
    loadCatalog(){
      let param = {
        // page: 1,
        // limit: 100
      }
      getClassifyPageList2(param).then(res => {
        if (res.code == 0){
          this.catalogList = res.data
        }
      })
    },
    loadGoods(){
      let param = {
        page: 1,
        limit: 2
      }
      getPageList(param).then(res => {
        if (res.code == 0){
          this.goodsList = res.data.records
        }
      })
    },
    changeClassify(val){
      console.log('val',val)
      let param = {
        classifyId: val.toString()
      }
      findByClassifyId(param).then(res => {
        console.log('res')
        if (res.code==0){
          this.goodsList = res.data
        }
      })
    },
    changColor(arg,index){
      // console.log('val',arguments)
      console.log('val',arguments)
      let val = arg[0].target.value
      console.log(val)
      if (this.forms.itemsList.length > 1){
        for (let i = 0; i < this.forms.itemsList.length; i++) {
          if (i != index){
            if (val == this.forms.itemsList[i].color){
              this.$message.warning('颜色不能重复，请重新输入')
              this.$nextTick(() => {
                this.$set(this.forms.itemsList[index],'color','')
              })
              return
            }
          }

        }
      }

    },
    addGoods(){
      this.forms.itemsList.push({
        upDownPrice: 0,
        supplyDemand: 1,
        status: 1,
      })
    },
    removeGoods(index){
      this.forms.itemsList.splice(index,1)
    },
    add(data) {
      // this.forms = Object.assign(
      //   {state: '1', permType: '1', orderNum: 1},
      //   data
      // )
      const temp = {state: '1', permType: '1', itemsList: [], ...data}
      this.forms = JSON.parse(JSON.stringify(temp))
      this.type = 'add'
    },
    edit(data) {
      this.forms = Object.assign({}, data)
      console.log('22',this.forms)
      this.forms.itemsList = data.itemList
      this.type = 'update'
    },
    save() {
      this.validateForm('form').then(res => {
        if (res) {
          for (let i = 0; i < this.forms.itemsList.length; i++) {
            if (!this.forms.itemsList[i].color){
              this.$message.warning('请输入商品行数据')
              return
            }
          }
          if (this.type === 'add'){
            saveProtocolGoodsPageList(this.forms).then(response => {
              console.log(response)
              if (response.code == 0){
                this.$emit('success')
                this.visible = false
              }
            })
          }else {
            this.forms.protocolGoodsId =this.forms.id
            updaterotocolGoodsPageList(this.forms).then(response => {
              console.log(response)
              if (response.code == 0){
                this.$emit('success')
                this.visible = false
              }
            })
          }

          // let call = this.type === 'add' ? add(this.forms) : update(this.forms)
          // call.then(response => {
          //   if (response.code === 0) {
          //     this.$message.success('保存成功！')
          //     this.$emit('success')
          //     this.visible = false
          //   }
          // })
        }
      })
    }
  }
}
</script>
<style scoped>
.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.fatherBox {
  min-height: 600px;
  background: #fff;
  padding: 20px;
}
</style>
